<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画一个可点击的圆</title>
    <style>
        /*canvas{*/
            /*width:500px;*/
            /*height:500px;*/
            /*background-color: #eeeeee;*/
        /*}*/
        div{
            width:150px;
            height:150px;
            background-color: #3e999f;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<canvas id="circle"></canvas>
<div></div>
<script>
var canvas=document.getElementById("circle");
var ctx=canvas.getContext("2d");
//ctx.beginPath();
//x,y,r,起始角，结束角，顺时针/逆时针
ctx.arc(50,50,20,0,360,false);
ctx.stroke();
//考虑到是否加滚动条
canvas.onclick=function(ev){
    ev=ev||event;
    console.log(ev.screenX,ev.screenY);
}
var oDiv=document.querySelector("div");
oDiv.onclick=function(){
    console.log("oDiv is circle!")
}



</script>
</body>
</html>